<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>太极图</title>
</head>
<style>
*{margin:0;padding:0;}
.fl{float:left;}
.wrap{
	width:100vw;
	height:100vh;
	background: gray;
}
.box{
	position: relative;
	top:50%;
	left:50%;
	width:100px;
	height:100px;
	transform:rotateY(360deg);
	animation:sLi1 6s linear 0s infinite normal;
	box-shadow: 0px 0px 50px yellow;
	border-radius: 50%;
}
@keyframes sLi1{
      from{
            transform: rotateZ(0deg); 
      }
      to{
            transform: rotateZ(360deg); 
      }
  }
.box>div{
	width:50%;
	height:50%;	
	color:cyan;
	text-align: center;
}
.box .one{
	background: #000;
	border-radius: 100% 0 0 0;
}
.box .two{
	background:#FFF;
	border-radius:  0 100% 0 0;
}
.box .three{
	background: #000;
	border-radius: 0 0 0 100% ;
}
.box .four{
	background:#FFF;
	border-radius:  0 0 100% 0;
}
.box .L{
	position: absolute;
	top:0;
	left:50%;
	width:50%;
	height:50%;
	transform:translateX(-50%);
	background: #000;
	border-radius: 50%;
}
.box .L .L_1{
	position: absolute;
	top:0;
	left:50%;
	width:50%;
	height:50%;
	transform:translate(-50%,50%);
	background: #fff;
	border-radius: 50%;
	box-shadow: 0px 0px 50px #fff;
}
.box .R{
	position: absolute;
	bottom:0;
	right:0;
	width:50%;
	height:50%;
	transform:translateX(-50%);
	background: #FFF;
	border-radius: 50%;
}
.box .R .R_1{
	position: absolute;
	top:0;
	left:50%;
	width:50%;
	height:50%;
	transform:translate(-50%,50%);
	background: black;
	border-radius: 50%;
	box-shadow: 0px 0px 50px #000;

}
.t{
	/*width:200px;*/
	height:100px;
	background: blue;
}
h5{
	width:100px;
	border:1px solid red;
}
.t span{
	float:right;
}
</style>
<body>
 <div class="wrap">
   <div class="box">
	   <div class="one fl"></div>
	   <div class="two fl"></div>
	   <div class="three fl">
           <div class="L">
              <div class="L_1"></div>
           </div>
	   </div>	         
       <div class="four fl">
         <div class="R">
          <div class="R_1"></div>
       </div>
       </div>      
	</div>
 </div>
 <div class="t"><h5>sssddd<span>22</span></h5></div>
</body>
</html>